// 具体的数据们

<template>
    <div class="box">
        <el-table :data="tableData" style="width: 100%;" class="tablestyle" stripe border>
            <el-table-column align="center" row-class-name="rowstyle" prop="ischose" width="80">
                <template #header>
                    <input type="checkbox">
                </template>
                <template #default="scoped">
                    <input type="checkbox" v-model="scoped.row.ischose">
                </template>
            </el-table-column>
            <el-table-column align="center" prop="id" label="编号" width="" />
            <el-table-column align="center" prop="title" label="活动标题" width="" />
            <el-table-column align="center" prop="endDate" label="活动状态">
                <template #default="scoped">
                    {{ 
                        // 当前时间 - 活动结束时间
                        ((new Date().getTime()) - (new Date(scoped.row.endDate).getTime() ) > 0 )
                        ? '活动已结束' 
                        : ((new Date().getTime()) - (new Date(scoped.row.startDate).getTime() ) > 0 
                        ? '活动进行中'
                        : '活动未开始')
                    }}
                </template>
            </el-table-column>
            <el-table-column align="center" prop="startDate" label="开始时间" width="140" >
            <template #default="scoped">
                    {{ scoped.row.startDate
                        ? dayjs(scoped.row.startDate).format("YYYY-MM-DD HH:mm:ss")
                        : ""
                    }}
                </template>
            </el-table-column>
            <el-table-column align="center" prop="endDate" label="结束时间" width="140" >
            <template #default="scoped">
                    {{ scoped.row.endDate
                        ? dayjs(scoped.row.endDate).format("YYYY-MM-DD HH:mm:ss")
                        : ""
                    }}
                </template>
            </el-table-column>
            <el-table-column align="center" prop="status" label="上线/下线">
                <template #default="scoped">
                    <el-switch :value="scoped.row.status == 1 ? true : false" />
                </template>
            </el-table-column>
            <el-table-column align="center" prop="dosth" label="操作" width="190">
                <template #default="scoped">
                    <i class="dosth" @click="setSth(scoped.row.id)">设置商品</i>&nbsp;
                    <i class="dosth"
                        @click="writeSth(scoped.row.dosth, scoped.row.title, scoped.row.brgin_time, scoped.row.stop_time, scoped.row.online_or)">编辑</i>
                    <i class="dosth"><el-button text @click="open(scoped.row.dosth)" style="color : red;">删除</el-button></i>
                </template>
            </el-table-column>
        </el-table>
        <div class="demo-pagination-block pages">
            <el-pagination v-model:current-page="pageNum" :page-sizes="pagesize" :default-page-size="pagesize[0]"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script lang="ts" setup>
// 加载的时候需要进行一个请求 获取数据
import { flash } from '@/request/api'
import { ref, defineEmits,watch, watchEffect,defineProps } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import * as dayjs from 'dayjs'
import {useRouter} from 'vue-router'
const router = useRouter()
// let myDate = new Date()
// 搜索的数据参数
let props =  defineProps<{
    seatchVal : Array<any>
}>()
// console.log(seatchVal);
watch(props,(newVal)=>{
    pagename.value = newVal.seatchVal[0]
    A()
})
let pagename = ref('')
let pageNum = ref(1) // 当前页
let pageSize = ref(5) // 每页几条
let tableData = ref([]) // 具体数据
let total = ref(0) // 共几条数据
let pagesize = ref([5, 10, 15]) //页数数组



const open = (e: any) => {  //弹出确认框
    ElMessageBox.confirm(
        `确认要删除这条数据吗`,
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        },
    )
        .then(() => {

            flash.FlashDelete({ id: e }).then(res => {
                // console.log(res)
                A() //再重新调用一下A
            })  //删除内容的请求

            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除失败',
            })
        })
}


const emits = defineEmits<{
    (e: 'update:isShow', param: boolean): void,
    (e: 'update:state', params: any): void
}>()

function A() {
    flash.flashListInfo({
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        keyword : pagename.value
    }).then(res => {
        // console.log(res);  //所有数据 发送的请求 对请求进行修改
        total.value = res.total
       
        tableData.value = res.list
    })
}
watchEffect(() => {
    A()
});
A()
let handleSizeChange = (e: number) => {
    pageSize.value = e
    A()

}
let handleCurrentChange = (e: number) => {
    pageNum.value = e
    A()
}


let setSth = (e: string) => {
    // console.log('设置商品', e);
    router.push(`/sms/selectSession?flashPromotionId=${e}`)
}
let writeSth = (e: string, t: string, ts: string, td: string, end: boolean) => {

    emits('update:state', {
        id: e,
        title: t,
        begintime: ts,
        endtime: td,
        chose: end
    })
    emits('update:isShow', true)
}




</script>
 
<style lang="scss" scoped>
.dosth {
    color: rgb(64, 158, 255);
    cursor: pointer;

    &:hover {
        color: rgb(123, 189, 255);
    }
}

.pages {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
</style>